<template>
  <div class="container-fluid" style="margin-top:20px">
   <div style="height:600px;width: 1200px;border: 1px solid lightskyblue;margin: 0px auto">
      <el-calendar v-model="value">
        <template slot="dateCell" eslint-disable-next-line slot-scope="{date, data}">
                {{ data.day.split('-').slice(1).join('-') }}
                <div type="danger" v-for="(item,index) in orederSetting" :key="index">
                   <div v-if="item.orderDate==data.day">
                      <h6 style="margin-top:0px">可预约{{item.number}}人</h6>
                      <h6 style="margin-top:-5px">已预约{{item.reservations}}人</h6>
                   </div>
                </div>
                <!-- </div> -->
        </template>
      </el-calendar>
   </div>
   <el-dialog
          :title="height"
          :visible.sync="dialogVisible"
          width="40%"
          >
        <div class="el-dialog-div">
          <!--第一行-->
          <el-row style="margin-top:10px">
            <el-col :span="2">
            </el-col>
            <el-col :span="22">
              <div class="reg-inpiut">
                <label class="input-label">预约日期:</label><el-date-picker :disabled="true"  v-model="orederSettings.orderDate" size="small" style="width: 180px;" type="date" placeholder="请选择出生日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
              </div>
            </el-col>
          </el-row> 

          <!--第二行-->
          <el-row style="margin-top:20px">
            <el-col :span="2">
            </el-col>
            <el-col :span="22">
              <div class="reg-inpiut">
                <label class="input-label">可预约人数:</label><el-input type="number" v-model="orederSettings.number" style="width: 180px;" size="small" placeholder="请输入预约人数"></el-input>
              </div>
            </el-col>
          </el-row> 
        </div>

        <span slot="footer" class="dialog-footer">
            <el-button @click="cancel" round style="margin-right:100px">取 消</el-button>
            <el-button type="primary" round style="margin-right:200px" @click="confirm">确定</el-button>
        </span>

   </el-dialog>
  </div>
</template>

<script>
export default {

   data() {

      return {
        //日历参数绑定
        value: new Date(),
        //对话框参数绑定
        dialogVisible:false,
        height:'编辑',
        //查询的预约设置信息绑定
        orederSetting:{
            id:'',
            orderDate:'',
            number:'',
            reservations:'',
            createtime:'',
            updatetime:'',
        },
        //编辑对话框预约设置信息绑定
        orederSettings:{
            id:0,
            orderDate:'',
            number:'',
            reservations:0,
            createtime:'',
            updatetime:'',
        }
      }
    },
  methods:{

      //对话框
      getCalendarList(date){

         this.dialogVisible=true;
         this.orederSettings={};
         this.orederSettings.orderDate=date;
         console.log( this.orederSettings)
         if(this.orederSettings!='' && this.orederSettings!=[]){
            for(let i=0;i<this.orederSetting.length;i++){

              if(this.orederSetting[i].orderDate==date){
                  this.orederSettings.number=this.orederSetting[i].number;
                  this.orederSettings.id=this.orederSetting[i].id;
                  break;
              }

            }

         }

      },
      //查询预约设置信息
      selectOrderSetting(){

        this.axios.post("/api/lzh/queryOrderSetting").then((rep)=>{

          this.orederSetting=rep.data;

        }).catch((err)=>{
            console.error(err);
        })
    },
    //取消对话框
    cancel(){

      this.dialogVisible=false;
      this.orederSetting={};
      this.selectOrderSetting();

    },
    //确定对话框信息
    confirm(){
        console.log(this.orederSettings)
         this.axios.post("/api/lzh/updateOrderSetting",
         this.orederSettings).then((req)=>{

          if(req.data==1){

            this.cancel();

            this.$message({
              type: 'success',
              message: '编辑成功'
            });

            this.selectOrderSetting();

          }else{

            this.$message({
              type: 'error',
              message: '编辑失败',
              duration:1000,
            });

            this.cancel();

          }

          }).catch((err)=>{
              console.error(err);
          })

    }

    
  },
   watch: {
            value: function() {
                var year = this.value.getFullYear();
                var month = this.value.getMonth() + 1;
                var date=this.value.getDate()
                if (date >= 1 && date <= 9) {//日如果小于10就补个0
                    date = "0" + date;
                }
                if (month >= 1 && month <= 9) {//月如果小于10就补个0
                    month = "0" + month;
                }
                //console.log(year + '-' + month + '-' + date) // 打印出日历选中了哪年哪月
                this.getCalendarList(year + '-' + month + '-' + date)   //  调用接口，把拼接好的参数传到后台
        }
   },
   //页面初始化
   created(){

      this.selectOrderSetting();

   }
}
</script>

<style>

.el-dialog__header{
  padding:10px 10px 10px;
  background-color:aqua
}

.input-label{
        display: inline-block;
        text-align: right;
        width: 80px;
}

 .reg-inpiut{
        height: 30px;
        line-height: 30px;
}

</style>